import React, { PureComponent } from 'react';
import moment from 'moment';
import { Link } from 'dva/router';
import { Table, Button } from 'antd';
import styles from './index.less';

class AdvertisingTable extends PureComponent {
  state = {
    selectedRowKeys: [],
  };

  componentWillReceiveProps(nextProps) {
    // clean state
    if (nextProps.selectedRows.length === 0) {
      this.setState({
        selectedRowKeys: [],
        // totalCallNo: 0,
      });
    }
  }

  handleRowSelectChange = (selectedRowKeys, selectedRows) => {
    // const totalCallNo = selectedRows.reduce((sum, val) => {
    //   return sum + parseFloat(val.callNo, 10);
    // }, 0);

    if (this.props.onSelectRow) {
      this.props.onSelectRow(selectedRows);
    }

    this.setState({ selectedRowKeys });
  }

  handleTableChange = (pagination, filters, sorter) => {
    this.props.onChange(pagination, filters, sorter);
  }

  cleanSelectedKeys = () => {
    this.handleRowSelectChange([], []);
  }
  render() {
    const { selectedRowKeys } = this.state;
    const { data: { content, totalElements, size, number }, loading } = this.props;
    const { onStart } = this.props;
    // const { onPay, onEdit, onShowHistory } = this.props;
    // const handleButtonClick = (e) => {
    //   message.info('Click on left button.');
    //   console.log('click left button', e);
    //   onShowHistory(true, e.key);
    // };
    //
    // const handleMenuClick = (record, e) => {
    //   message.info('Click on menu item.');
    //   console.log('click', e);
    //   console.log('click', record);
    //   if (e.key === '1') {
    //     onEdit(true, record);
    //   } else if (e.key === '2') {
    //     confirm({
    //       title: 'Are you sure delete this record?',
    //       onOk() {
    //         onPay(record.id);
    //       },
    //     });
    //   }
    // };
    const handleStart = (e, record) => {
      onStart(e, {
        id: record.id,
        adStatus: 1,
      });
    };
    const handleStop = (e, record) => {
      onStart(e, {
        id: record.id,
        adStatus: 0,
      });
    };
    // const handleEdit = (e, record) => {
    //   // onEdit(e, record);
    // };
    const columns = [
      // {
      //   title: '编号',
      //   dataIndex: 'id',
      // },
      {
        title: '广告名称',
        dataIndex: 'name',
      },
      {
        title: '所属广告主',
        dataIndex: 'aderName',
        // sorter: true,
        // align: 'right',
        // render: val => `${val} 万`,
      },
      {
        title: '广告位置',
        dataIndex: 'slotName',
      },
      {
        title: '广告单价(元)',
        dataIndex: 'price',
      },
      {
        title: '广告排期',
        dataIndex: 'date',
        render: val => <span>{moment(val[0]).format('YYYY-MM-DD')}~{moment(val[1]).format('YYYY-MM-DD')}</span>,
      },
      {
        title: '状态',
        dataIndex: 'adStatus',
      },
      {
        title: '创建时间',
        dataIndex: 'createAt',
        sorter: true,
        render: val => <span>{moment(val).format('YYYY-MM-DD HH:mm:ss')}</span>,
      },
      {
        title: '操作',
        render: (text, record) => {
          return (
            <div>
              <Button type="primary" onClick={e => handleStart(e, record)}>启动</Button>
              <Link
                to={{
                  pathname: '/release/addAd',
                  currentRecord: {
                    ...record,
                  },
                }}
              >
                <Button>编辑</Button>
              </Link>
              <Button type="primary" onClick={e => handleStop(e, record)}>停止</Button>
            </div>
          );
        },
      },
    ];

    const paginationProps = {
      showSizeChanger: true,
      showQuickJumper: true,
      total: totalElements,
      pageSize: size,
      current: parseInt(number, 10) + 1 || 1,
    };

    const rowSelection = {
      selectedRowKeys,
      onChange: this.handleRowSelectChange,
      getCheckboxProps: record => ({
        disabled: record.disabled,
      }),
    };

    return (
      <div className={styles.standardTable}>
        <Table
          loading={loading}
          rowKey={record => record.key}
          rowSelection={rowSelection}
          dataSource={content}
          columns={columns}
          pagination={paginationProps}
          onChange={this.handleTableChange}
        />
      </div>
    );
  }
}

export default AdvertisingTable;
